<script language='javascript'>
    
    Array.prototype.parseToInt = function(){
        jQuery.each(this, function(i,item){
            this[+i] = +parseInt(item);
        });
    }
    
    
    $(document).ready(function() {
        var panel_1 = Rocket.Create({
            type:'panel',
            id:'formReport_1',
            title:'Reporte Incritos por grupo',
            width:'100%',
            heigth:100,
            collapsible:true,
            isForm:true,
            autoLoad:false,
            renderTo:'DivFiltros',
            proxy:{
                url: BASE_URL+'reportes/get_registered_people'
            },
            items: [{
                    type: 'select',
                    autoLoad:true,
                    id:'rck_TipoGrupoId',
                    label: 'Tipo Grupo',
                    //style:'float:left;width:20%',
                    name: 'TipoGrupoId',
                    dataField: 'nombre',
                    dataIndex:'TipoGrupoId',
                    proxy:{
                        url: BASE_URL + 'tipogrupos/loadList'
                    }
                },{
                    type:'select',
                    //style:'float:left;width:20%',
                    //autoLoad:true,
                    autoLoad:true,
                    id:'rck_comunas',
                    label:'Comuna',
                    name:'comuna_id',
                    dataField:'nombre',
                    dataIndex:'id',
                    proxy:{
                        url: BASE_URL + 'comunas/loadList'
                    },
                    change:function(model){
                                
                        cmbIglesias = Rocket.get('rck_IglesiaId');
                        //cmbSector.set(''); //limpiamos el combo y su valor seleccionado
                        cmbIglesias.set('');//limpiamos el combo y su valor seleccionado
                        //cmbIglesias.disabled = false;
                        cmbIglesias.load({item:Rocket.encode({comuna_id:model.get('id')})});
                    }
                },{
                    type: 'select',
                    //disabled:true,
                    autoLoad:false,
                    id:'rck_IglesiaId',
                    label: 'Iglesia',
                    name: 'IglesiaId',
                    dataField: 'nombre',
                    dataIndex:'IglesiaId',
                    proxy:{
                        //url: BASE_URL + 'iglesias/loadList'
                        url: BASE_URL + 'iglesias/loadListByComuna'
                    } 
                },{
                    type: 'select',
                    label: 'Desde',
                    name: 'mes_id_inic',
                    id:'rck_mes_inic',
                    dataField:'texts',
                    dataIndex:'value',
                    fields:[
                        {value:'1',texts:'ENERO'},
                        {value:'2',texts:'FEBRERO'},
                        {value:'3',texts:'MARZO'},
                        {value:'4',texts:'ABRIL'},
                        {value:'5',texts:'MAYO'},
                        {value:'6',texts:'JUNIO'},
                        {value:'7',texts:'JULIO'},
                        {value:'8',texts:'AGOSTO'},
                        {value:'9',texts:'SEPTIEMBRE'},
                        {value:'10',texts:'OCTUBRE'},
                        {value:'11',texts:'NOVIEMBRE'},
                        {value:'12',texts:'DICIEMBRE'}
                    ]
                },{
                    type: 'select',
                    label: 'Hasta',
                    name: 'mes_id_fin',
                    id:'rck_mes_fin',
                    dataField:'texts',
                    dataIndex:'value',
                    fields:[
                        {value:'1',texts:'ENERO'},
                        {value:'2',texts:'FEBRERO'},
                        {value:'3',texts:'MARZO'},
                        {value:'4',texts:'ABRIL'},
                        {value:'5',texts:'MAYO'},
                        {value:'6',texts:'JUNIO'},
                        {value:'7',texts:'JULIO'},
                        {value:'8',texts:'AGOSTO'},
                        {value:'9',texts:'SEPTIEMBRE'},
                        {value:'10',texts:'OCTUBRE'},
                        {value:'11',texts:'NOVIEMBRE'},
                        {value:'12',texts:'DICIEMBRE'}
                    ]
                },{
                    type: 'select',
                    label: 'Año',
                    name: 'agno_id',
                    id:'rck_agno',
                    dataField:'texts',
                    dataIndex:'value',
                    fields:[
                        {value:'2012',texts:'2012'},
                        {value:'2013',texts:'2013'},
                        {value:'2014',texts:'2014'},
                        {value:'2015',texts:'2015'},
                        {value:'2016',texts:'2016'}
                    ]
                }],
                buttons:[{
                    type:'button',
                            id:'btnSubmit',
                            name:'submit',
                            value:'Generar',
                            handler:function(){
                                var values = panel_1.getValues();
                                //console.debug(rck_mes_inic.value);
                                if(rck_IglesiaId.value != '' && rck_TipoGrupoId.value !=''){
                                    
                                    if(rck_mes_fin.value >= rck_mes_inic.value){
                                        panel_1.submit({
                                            data:values,
                                            success:function(data){
                                                if(data.success){
                                                    
                                              //      data.data[0].parseToInt();
                                                    
                                                    chart.series[0].setData(data.data[0]);
                                                    chart.series[1].setData(data.data[1]);
                                                    chart.series[2].setData(data.data[2]);
                                                    chart.series[3].setData(data.data[3]);
                                                    chart.series[4].setData(data.data[4]);
                                                    //console.debug(data.data[5]);
                                                    chart.xAxis[0].setCategories(data.data[5]);
                                                }
                                            }});
                                    }
                                    else{
                                            Rocket.Create({
                                                type:'dialog',
                                                title:'Error en la operacion',
                                                typeAlert:'error',
                                                message:'Mes inicial debe ser menor o igual que el final'
                                            });     
                                    }
                                }
                                else {
                                    Rocket.Create({
                                        type:'dialog',
                                        title:'Error en la operacion',
                                        typeAlert:'error',
                                        message:'Todos los campos son requeridos'
                                    });
                                }
                            }
                        }
                ]
        });
        
        
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            width:'400',
            
            title: {
                text: 'Inscritos por grupo',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
	    categories: []
            },
            yAxis: {
                title: {
                    text: 'N° Inscritos'
                },
                plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
            },
            tooltip: {
                formatter: function() {
                    return 'En el mes de <strong>'+ this.x +'</strong>, hay <strong>'+this.y+'</strong> inscritos<br/>';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series:[
			{
            	name: 'Inscritos',
            	data: []
        	},
			{
            	name: 'Hombres',
            	data: []
        	},
			{
            	name: 'Mujeres',
            	data: []
        	},
			{
            	name: 'Lideres',
            	data: []
        	},
			{
            	name: 'discipulos',
            	data: []
        	}
		]
        }); 
        
    });
    
</script>

<?php echo utf8_decode($module_banner);?>
<ul class='ul_page'>
    <li><div id="DivFiltros"></div>
        <div id="container"></div>
    </li>
</ul>

